<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改产品类别')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        div .col-sm-8 span{
            color: darkgrey;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-edit" th:object="${oProduct}">
        <input name="id" th:field="*{id}" hidden></input>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">排序：</label>
            <div class="col-sm-8">
                <input name="sortOrder" class="form-control" type="text" th:field="*{sortOrder}" required>
                <span class="sortOrder">数字越大排的越前面,范围0-999</span>
            </div>
        </div>
        <div class="form-group" style="display: none">
            <label class="col-sm-3 control-label is-required">资源目录：</label>
            <div class="col-sm-8" >
                <input id="treeId" name="resourcesId" type="hidden" th:field="*{resourcesId}"/>
                <input class="form-control" type="text" onclick="selectResourcesTree()" id="treeName" readonly="true" required th:field="*{resourceName}">
                <!--                    <span class="input-group-addon"><i class="fa fa-search"></i></span>-->
                <!--                    <input name="resourcesId" class="form-control" type="text">-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">产品名称：</label>
            <div class="col-sm-8">
                <input name="productName" class="form-control" type="text" required th:field="*{productName}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">产品类别：</label>
            <div class="col-sm-8">
                <select name="productType" class="form-control m-b" th:with="type=${@dict.getType('product_type')}" >
                    <option value="">---请选择---</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                        th:selected="${dict.dictValue} eq *{productType}"></option>
                </select>
                <!--                    <input name="productType" class="form-control" type="text" required>-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">发布单位：</label>
            <div class="col-sm-8">
                <select name="productDepartment" class="form-control m-b" required>
                    <option value="">--请选择--</option>
                    <option th:each="dept:${deptList}" th:text="${dept.deptName}" th:value="${dept.departcode}"
                        th:selected="${dept.departcode} eq *{productDepartment}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">预报类型：</label>
            <div class="col-sm-8">
                <select name="forecastType" class="form-control m-b" required>
                    <option value="">--请选择--</option>
                    <option th:each="type:${forecastTypes}" th:text="${type.typeName}" th:value="${type.typeCode}"
                        th:selected="${type.typeCode} eq *{forecastType}"></option>
                </select>
                <!--                    <input name="forecastType" class="form-control" type="text" required>-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">产品类型：</label>
            <div class="col-sm-8">
                <select name="productItem" class="form-control m-b">
                    <option value="">---请选择---</option>
                    <option th:each="type:${productTypes}" th:text="${type.productName}" th:value="${type.productCode}"
                        th:selected="${type.productCode} eq *{productItem}"></option>
                </select>
                <!--                    <input name="productItem" class="form-control" type="text">-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">覆盖海区：</label>
            <div class="col-sm-8">
                <!--
                                    <select name="coverSeaArea" class="form-control m-b">
                                        <option value="">-&#45;&#45;请选择-&#45;&#45;</option>
                                        <option th:each="oceanArea:${oceanAreas}" th:text="${oceanArea.areaName}" th:value="${oceanArea.areaCode}"></option>
                                    </select>
                -->
                <input name="coverSeaArea" hidden th:field="*{coverSeaArea}"/>
                <input id="oceanName" class="form-control" type="text" onclick="oceanareapop()" required readonly th:field="*{oceanName}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">预报时效：</label>
            <div class="col-sm-8">
                <select name="forecastAging" class="form-control m-b" required>
                    <option value="">---请选择---</option>
                    <option th:each="aging:${agings}" th:text="${aging.name}" th:value="${aging.code}"
                        th:selected="${aging.code} eq *{forecastAging}"></option>
                </select>
                <!--                    <input name="forecastAging" class="form-control" type="text" required>-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">预报要素：</label>
            <div class="col-sm-8" th:required="true" id="element">
                <input name="forecastElement" type="radio" th:each="element:${elements}"
                       th:value="${element.englishAbbreviations}" th:text="${element.elementName}"
                       th:checked="${oProduct.forecastElement==element.englishAbbreviations}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">产品模式：</label>
            <div class="col-sm-8">
                <input name="productMode" hidden th:field="*{productMode}">
                <input id="modeName" class="form-control" type="text" onclick="modePop()" required readonly th:field="*{modeName}">
                <!--                    <input name="productMode" class="form-control" type="text" required>-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">时间格式：</label>
            <div class="col-sm-8">
                <select id="timetype" class="form-control m-b" required>
                    <option value="YYYY">YYYY(年)</option>
                    <option value="YYYYMM">YYYYMM(年月)</option>
                    <option value="YYYYMMDD">YYYYMMDD(年月日)</option>
                    <option value="YYYYMMDDHH">YYYYMMDDHH(年月日时)</option>
                    <option value="YYYYMMDDHHMM">YYYYMMDDHHMM(年月日时分)</option>
                    <option value="YYYYMMDDHHMMSS">YYYYMMDDHHMMSS(年月日时分秒)</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">命名规则：</label>
            <div class="col-sm-8">
                <input name="nameRule" class="form-control" type="text" required th:field="*{nameRule}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">文件格式：</label>
            <div class="col-sm-8">
                <input name="fileType" class="form-control" type="text" required th:field="*{fileType}">
                <span class="nameRule">只有nc格式的文件会进行头文件识别和裁切</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">分辨率：</label>
            <div class="col-sm-8">
                <input name="resolution" class="form-control" type="text" required th:field="*{resolution}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">起报时间：</label>
            <div class="col-sm-8">
                <select name="frequency" class="form-control m-b" >
                    <option value="">---请选择---</option>
                    <option th:each="frequency:${frequencies}" th:text="${frequency.name}" th:value="${frequency.code}"
                        th:selected="${frequency.code} eq *{frequency}"></option>
                </select>
                <!--                    <input name="frequency" class="form-control" type="text" required>-->
                <span class="frequency">对应产品命名规则YYYYMMDDHH字段中的HH</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">时间间隔：</label>
            <div class="col-sm-8">
                <select name="forecastInterval" class="form-control m-b">
                    <option value="">---请选择---</option>
                    <option th:each="interval:${forecastIntervals}" th:text="${interval.name}" th:value="${interval.code}"
                        th:selected="${interval.code} eq *{forecastInterval}"></option>
                </select>
                <!--                    <input name="forecastInterval" class="form-control" type="text">-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">文件大小：</label>
            <div class="col-sm-8">
                <input name="fileSize" class="form-control" type="text" required placeholder="MB" th:field="*{fileSize}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">上限阈值：</label>
            <div class="col-sm-8">
                <input name="maxFileSize" class="form-control" type="text" placeholder="%(百分比)" required th:field="*{maxFileSize}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">下限阈值：</label>
            <div class="col-sm-8">
                <input name="minFileSize" class="form-control" type="text" placeholder="%(百分比)" required th:field="*{minFileSize}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">启用阈值：</label>
            <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                <input name="isOpenThreshold" type="radio" th:each="dict:${type}"
                       th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="*{isOpenThreshold} eq ${dict.dictValue}">
            </div>
        </div>
        <!--<div class="form-group">
            <label class="col-sm-3 control-label">左下经度/纬度：</label>
            <div class="col-sm-4">
                <input name="leftUpLongitude" class="form-control" type="text" th:field="*{leftUpLongitude}">
            </div>
            <div class="col-sm-4">
                <input name="leftUpLatitude" class="form-control" type="text" th:field="*{leftUpLatitude}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">右上经度/纬度：</label>
            <div class="col-sm-4">
                <input name="rightDownLongitude" class="form-control" type="text" th:field="*{rightDownLongitude}">
            </div>
            <div class="col-sm-4">
                <input name="rightDownLatitude" class="form-control" type="text" th:field="*{rightDownLatitude}">
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">自动发布：</label>
            <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                <input name="isAuto" type="radio" th:each="dict:${type}"
                       th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="*{isAuto} eq ${dict.dictValue}">
            </div>
        </div>
        <!--<div class="form-group">
            <label class="col-sm-3 control-label">是否可预览：</label>
            <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                <input name="isPreview" type="radio" th:each="dict:${type}"
                       th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="*{isPreview} eq ${dict.dictValue}">
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">是否前端显示：</label>
            <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                <input name="isOpen" type="radio" th:each="dict:${type}"
                       th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="*{isOpen} eq ${dict.dictValue}">
            </div>
        </div>
   <!--     <div class="form-group">
            <label class="col-sm-3 control-label">是否永久保存：</label>
            <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                <input name="isForeverSave" type="radio" th:each="dict:${type}"
                       th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="*{isForeverSave} eq ${dict.dictValue}">
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">是否检查更新：</label>
            <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                <input name="isJoinHistory" type="radio" th:each="dict:${type}"
                       th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="*{isJoinHistory} eq ${dict.dictValue}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">检查更新天数：</label>
            <div class="col-sm-8">
                <select name="notUpdateCheckDays" class="form-control m-b">
                    <option value="">---请选择---</option>
                    <option th:each="day:${historyDays}" th:text="${day.historyDays}" th:value="${day.historyCode}"
                        th:selected="${day.historyCode} eq *{notUpdateCheckDays}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">判断晚传时间设置：</label>
            <div class="col-sm-8">
                <input name="wcsz" class="form-control" type="text" th:field="*{wcsz}">
                <span class="checkConfig">晚传设置：设置格式举例：0_18_0900 ，表示每天早9点（北京时）检查该产品起报时为前一日18时的文件。说明：第一字段的一位数为0或1，0表示要检查的文件起报时间在检查时间的前一日，1表示为同日；中间字段的两位数为文件起报时间（小时）；最后四位数表示在每天xx点xx分（北京时）进行检查。若有多个设置，请用英文逗号分隔。</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">归档超时提醒设置：</label>
            <div class="col-sm-8">
                <input name="checkConfig" class="form-control" type="text" th:field="*{checkConfig}">
                <span class="checkConfig">归档检查时间设置：此处设置每日文件在云平台的归档检查时间，若对应文件在设置时间未成功归档，系统将向产品负责人发送Email及短信提醒。设置格式举例：0_18_0900 ，表示每天早9点（北京时）检查该产品起报时为前一日18时的文件。说明：第一字段的一位数为0或1，0表示要检查的文件起报时间在检查时间的前一日，1表示为同日；中间字段的两位数为文件起报时间（小时）；最后四位数表示在每天xx点xx分（北京时）进行检查。若有多个设置，请用英文逗号分隔。
                    </span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">晚传检查时间设置：</label>
            <div class="col-sm-8">
                <select name="lateTransmission" class="form-control m-b">
                    <option value="">---请选择---</option>
                    <option th:each="time:${productLateTimes}" th:text="${time.lateName}" th:value="${time.lateCode}"
                        th:selected="${time.lateCode} eq *{lateTransmission}"></option>
                </select>
                <!--                    <input name="lateTransmission" class="form-control" type="text">-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">补传检查时间设置：</label>
            <div class="col-sm-8">
                <select name="repairTransmission" class="form-control m-b">
                    <option value="">---请选择---</option>
                    <option th:each="time:${repairTimes}" th:text="${time.repairName}" th:value="${time.repairCode}"
                        th:selected="${time.repairCode} eq *{repairTransmission}"></option>
                </select>
                <!--                    <input name="repairTransmission" class="form-control" type="text">-->
                <span class="repairTransmission">若产品文件在晚传检查时间仍未成功归档，则从归档检查时间开始经过此时间段后系统将进行补传检查。若文件在补传检查时间前上传并成功归档，则该文件上传状态会转为补传。
                    </span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">补传短信提醒日：</label>
            <div class="col-sm-8">
                <select name="repairTipSmsDay" class="form-control m-b">
                    <option value="">---请选择---</option>
                    <option th:each="time:${repairTimes}" th:text="${time.repairCode}" th:value="${time.repairCode}"
                        th:selected="${time.repairCode} eq *{repairTipSmsDay}"></option>
                </select>
                <!--                    <input name="repairTipSmsDay" class="form-control" type="text">-->
                <span class="repairTipSmsDay">若产品文件在晚传检查时间仍未成功归档，将于该提醒日（归档检查时间后第x日）发送短信对负责人进行提醒，设置的提醒日不能大于补传检查时间
                    </span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否归档解压：</label>
            <div class="col-sm-8">
                <div class="col-sm-8" th:with="type=${@dict.getType('yes_or_no')}">
                    <input name="isUnzip" type="radio" th:each="dict:${type}"
                           th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="*{isUnzip} eq ${dict.dictValue}">
                </div>
                <!--                    <input name="isUnzip" class="form-control" type="text">-->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">短信提醒电话：</label>
            <div class="col-sm-8">
                <input name="smsTipPhone" class="form-control" th:field="*{smsTipPhone}"></input>
                <span class="smsTipPhone">多个电话间用英文逗号分隔</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">提醒邮箱设定：</label>
            <div class="col-sm-8">
                <input name="sendMail" class="form-control" th:field="*{sendMail}"></input>
                <span class="sendMail">多个邮箱地址间用英文逗号分隔</span>
            </div>
        </div>
      <!--  <div class="form-group">
            <label class="col-sm-3 control-label">可预览/下载单位：</label>
            <div class="col-sm-8">
                <input type="checkbox" id="allChecked">全选
                <div>
                    <input name="departIds" type="checkbox" th:each="dept:${deptList}" th:value="${dept.deptId}"
                           th:text="${dept.deptName}" th:checked="${#strings.contains(oProduct.departIds,dept.deptId)}">
                </div>
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">产品简要介绍：</label>
            <div class="col-sm-8">
                <textarea name="productDrief" class="form-control" style="height: 150px" th:field="*{productDrief}"></textarea>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />\
<script th:src="@{/static/ocean/js/add.js}" type="text/javascript"></script>
<script th:inline="javascript">
    var prefix = ctx + "product/product"
    /*
            $("#form-product-add").validate({
                focusCleanup: true
            });
    */
    window.onload = function() {
        setTimeTypeByNamingRule();
    };

    $("#allChecked").click(function () {   //全选框按钮点击事件
        var flg = this.checked;

        $("input[name=departIds]").each(function () {
            this.checked = flg;
        });
    });
    $(document).on("click","input[name=departIds]",function(){ //复选框点击事件
        //判断当前选择中的元素是否等于总复选框个数
        var flag = $("input[name=departIds]:checked").length==$("input[name=departIds]").length;
        $("#allChecked").prop("checked",flag);
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-product-edit').serialize());
        }
    }

    $("input[name='createDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='updateDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    /**
     * 根据命名规则中的日期时间格式长度，自动选中timetype下拉框对应选项
     */
    function setTimeTypeByNamingRule() {
        // 1. 获取命名规则输入框的值
        const nameRuleInput = document.querySelector('input[name="nameRule"]');
        if (!nameRuleInput) {
            console.error("未找到name为'nameRule'的输入框");
            return;
        }
        const nameRule = nameRuleInput.value.trim();
        if (!nameRule) {
            console.warn("命名规则为空，无法解析");
            return;
        }

        // 2. 解析命名规则，提取日期时间部分（核心：格式如YYYY/YYYYMM/YYYYMMDD等）
        // 规则格式：NMF_BEN_DT_GLDT_YYYYMMDDHH_108h_OCE，按下划线分割后日期在第5个位置（索引4）
        const ruleParts = nameRule.split('_');
        if (ruleParts.length < 6) { // 至少需要6个部分（索引0-5）才能包含日期字段
            console.error("命名规则格式不正确，无法提取日期时间部分");
            return;
        }
        const dateTimePart = ruleParts[4]; // 日期时间部分（如：YYYY→4位、YYYYMM→6位、YYYYMMDDHH→10位等）

        // 3. 验证日期时间部分格式（必须是纯数字，且长度符合下拉框选项的格式）
        const validLengths = [4, 6, 8, 10, 12, 14]; // 对应下拉框选项的长度：YYYY(4)、YYYYMM(6)...YYYYMMDDHHMMSS(14)
     /*   if (!/^\d+$/.test(dateTimePart)) {
            console.error("日期时间部分必须为纯数字");
            return;
        }*/
        if (!validLengths.includes(dateTimePart.length)) {
            console.error(`日期时间部分长度无效（有效长度：${validLengths.join('/')}位），当前长度：${dateTimePart.length}位`);
            return;
        }

        // 4. 建立「长度→下拉框value」的映射关系（和你的下拉框选项完全对应）
        const lengthToTimeTypeMap = {
            4: 'YYYY', // 4位 → YYYY(年)
            6: 'YYYYMM', // 6位 → YYYYMM(年月)
            8: 'YYYYMMDD', // 8位 → YYYYMMDD(年月日)
            10: 'YYYYMMDDHH', // 10位 → YYYYMMDDHH(年月日时)
            12: 'YYYYMMDDHHMM', // 12位 → YYYYMMDDHHMM(年月日时分)
            14: 'YYYYMMDDHHMMSS' // 14位 → YYYYMMDDHHMMSS(年月日时分秒)
        };

        // 5. 根据长度获取对应的timetype值
        const defaultTimeType = lengthToTimeTypeMap[dateTimePart.length];

        // 6. 选中下拉框对应选项（适配你提供的下拉框id="timetype"）
        const timeTypeSelect = document.querySelector('#timetype'); // 用id选择器更精准
        if (timeTypeSelect) {
            // 检查下拉框是否有对应选项，有则选中
            const hasOption = Array.from(timeTypeSelect.options).some(option => option.value === defaultTimeType);
            if (hasOption) {
                timeTypeSelect.value = defaultTimeType;
                console.log(`成功选中timetype：${defaultTimeType}`);
            } else {
                console.warn(`timetype下拉框中无值为'${defaultTimeType}'的选项`);
            }
        } else {
            console.error("未找到id为'timetype'的下拉框");
        }
    }
</script>
</body>
</html>
